<template>
  <el-dialog title="Category list" :visible="true" @close="closeCategoryDialog">
    <div class="tagsBox">
      <div class="awiting">
        <div class="awitingLeft">
          <el-table
            ref="variantTable"
            :data="tableData"
            :max-height="350"
            row-key="id"
            border
            :tree-props="{ children: 'seconds', hasChildren: 'hasChildren' }"
            @row-click="toggleRow"
          >
            <el-table-column prop="name" label="Name" />
            <el-table-column fixed="right" label="Operation" width="130">
              <template slot-scope="scope">
                <el-button
                  type="text"
                  @click="productCategoryDelete(scope.row.id)"
                >Delete</el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <div class="awitingright">
          <el-form v-model="form">
            <el-form-item>
              <el-input v-model="form.name" placeholder="name" />
            </el-form-item>
            <el-form-item>
              <el-select v-model="form.parentId" placeholder="parent">
                <el-option
                  v-for="(item, index) in categoryOption"
                  :key="index"
                  :label="item.name"
                  :value="item.id"
                />
              </el-select>
            </el-form-item>
            <el-form-item style="text-align:right;">
              <el-button
                v-preventReClick
                type="primary"
                :disabled="!form.name"
                @click="addData"
              >Add</el-button>
            </el-form-item>
          </el-form>
        </div>
      </div>
    </div>
    <div slot="footer" class="dialog-footer">
      <el-button @click="closeCategoryDialog">Close</el-button>
    </div>
  </el-dialog>
</template>

<script>
import {
  productCategoryList,
  productCategoryAdd,
  productCategoryDelete
} from '@/api/product';
import { postResult } from '@/utils/dataFormat';
export default {
  props: {
    viewCategory: {
      type: Boolean,
      required: true
    },
    storeId: {
      type: Number,
      required: true
    }
  },
  data() {
    return {
      tableData: [],
      categoryOption: [],
      form: {}
    };
  },
  mounted() {
    this.init();
  },
  methods: {
    init() {
      productCategoryList({ storeId: this.storeId, parentId: -1 }).then(res => {
        const arr = [];
        const options = [];
        res.data.forEach((item, index) => {
          options.push(item.first);
          arr[index] = item.first;
          arr[index]['seconds'] = item.seconds;
        });
        this.tableData = arr;
        this.categoryOption = options;
      });
    },
    addData() {
      const { name, parentId } = this.form;
      var params = {
        name,
        parentId: parentId || 0,
        isLeaf: parentId ? 1 : 0,
        storeId: this.storeId
      };
      productCategoryAdd(params).then(res => {
        postResult(res, this.$message, this.init);
        if (res.code === 200) {
          this.form = {};
        }
      });
    },
    productCategoryDelete(id) {
      productCategoryDelete([id]).then(res => {
        postResult(res, this.$message, this.init);
      });
    },
    toggleRow(row) {
      this.$refs.variantTable.toggleRowExpansion(row);
    },
    closeCategoryDialog() {
      this.$emit('closeCategoryDialog');
    }
  }
};
</script>
<style lang="scss" scoped>
.tagsBox {
  > div {
    border-top: 1px solid #ddd;
    padding: 15px 0;
    &.awiting {
      display: flex;
      justify-content: space-between;
      padding-bottom: 0;
      .awitingLeft {
        flex: 1;
        margin-right: 15px;
        padding-right: 15px;
        border-right: 1px solid #ddd;
      }
      .awitingRight {
        width: 230px;
      }
    }
    .title {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 15px;
      > span {
        font-weight: 600;
      }
      .btns {
        float: right;
      }
    }
    .tagList {
      max-height: 200px;
      overflow-y: scroll;
      .tagItem {
        margin-right: 10px;
        margin-bottom: 10px;
        cursor: pointer;
      }
      .el-tag.el-tag--info {
        cursor: default;
      }
    }
  }
}
</style>
